import React, { Component } from 'react'


// forwardRef: 让函数组件可以使用 ref 属性
// forwardRef 是一个高阶组件，高阶组件是类似 Vue 中的 mixin
// 高阶组件又叫做 HOC ,是一个函数，接收一个组件，返回一个新的组件
// 高阶组件是用来提高组件的复用能力的
const Main = React.forwardRef((props, ref) => {

    return <h1 ref={ref}>Main 函数组件</h1>
})

export default class App extends Component {

    mainRef = React.createRef()
    render() {
        return (
            <div>
                <Main ref={this.mainRef} />
                <hr />
                <button onClick={() => {
                    console.log(this.mainRef.current);
                }}>获取 ref 值</button>
            </div>
        )
    }
}

